<template>
	<view class="passWordLoging">
		<view class="navOneView">
			<i class="iconfont icon-zuojiantou" @tap="navOneViewFn"></i>
		</view>
		<h3>请输入密码</h3>
		<p class="phone-view"> <text class="phone-name">手机号码:</text> <text class="phone-number">+86 {{phone}}</text></p>
		<view class="pass-box">

			<!-- <input type="password" class="input-value" v-model="password" placeholder="请输入密码" @input="clearInput" /> -->
			<input ref="inputRef" type="number" :password="showPassword" placeholder="请输入密码至少6位" v-model="password"
				maxlength=12 class="input-value" @input="clearInput" />
			<!-- 显示或隐藏密码 -->
			<!-- 	<view @click="showPwd">
				<p v-show="showPassword">888888888</p>
				<p v-show="!showPassword">666666666666</p>
			</view> -->

			<text class="clearIcon" v-show="showClearIcon" @click="clearIcon">
				&#10005
			</text>
		</view>
		<button type="primary" :disabled="disabledFlag" @tap="loginFn" :loading="loginFlag"
			class="login">{{loginFlag?'登录中':'登录'}}</button>
		<p class="info"><text class="forget-password">忘记密码？使用</text> <text class="other-login"
				@tap="oneClickLogin">其他验证方式</text> </p>



		<uni-popup ref="popupLoginType" background-color="#fff" class="popup-login-type-box" :mask-click="false"
			borderRadius="48rpx 48rpx 0 0">
			<loginTypePopupVue :phone='phone' :loginType='loginType' @codeLoginHandler="codeLoginHandler"
				@closeTypeLogin="closeTypeLogin" />
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import loginTypePopupVue from '../../../components/loginTypePopup/loginTypePopup.vue';
	import {
		ref,
		computed,
		reactive,
		nextTick
	} from 'vue'
	let phone = ref()
	let password = ref('')
	let loginFlag = ref(false)
	let inputClearValue = ref()
	let showClearIcon = ref(false)
	let popupLoginType = ref('')
	let inputRef = ref('')
	const loginType = reactive({
		passLogin: false,
		codeLogin: true
	})
	let showPassword = ref(true)
	const showPwd = () => {
		showPassword.value = !showPassword.value
	}
	const disabledFlag = computed(() => {
		if (password.value.length >= 6) {
			return false
		} else {
			return true
		}
	})
	const codeLoginHandler = (fn) => {
		fn()
	}
	const closeTypeLogin = () => {
		popupLoginType.value.close()
	}
	// 其他验证
	const oneClickLogin = () => {
		popupLoginType.value.open('bottom')
	}
	// 返回上一级
	const navOneViewFn = () => {
		uni.navigateTo({
			url: '/pages/login/login'
		})
	}
	// 登录
	const loginFn = () => {
		loginFlag.value = true
	}

	const clearInput = (event) => {
		nextTick(() => {
			console.log(inputRef.value);
		})
		inputClearValue.value = event.detail.value;
		if (event.detail.value.length > 0) {
			showClearIcon.value = true;
			// inputRef.value.focus()
		} else {
			showClearIcon.value = false;
		}
	}
	// 清除数据
	const clearIcon = () => {
		password.value = '';
		showClearIcon.value = false;
	}


	onLoad((option) => {
		let staging = JSON.parse(decodeURIComponent(option.BLi))

		phone.value = staging.substring(0, 3) + ' **** ' + staging.substring(staging
			.length - 4)
	})
</script>

<style scoped lang="scss">
	input[type="password"]::-ms-reveal {
		display: none !important;
	}

	.passWordLoging {
		padding: 0 32rpx;
		background-image: url('../../../static/images/bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		height: 100vh;

		:deep(uni-button[disabled]) {
			background-color: rgba(0, 122, 255, 0.3);
		}

		.navOneView {
			height: 88rpx;
			line-height: 88rpx;
		}

		h3 {
			color: #1d2129;
			font-family: "PingFang SC";
			font-size: 48rpx;
			font-weight: 500;
			line-height: 67.2rpx;
		}

		.phone-view {
			margin-top: 16rpx;

			.phone-name {
				color: #86909c;
				font-family: "PingFang SC";
				font-size: 28rpx;
				font-style: normal;
				font-weight: 400;
				line-height: 39.2rpx;
			}

			.phone-number {
				color: #1d2129;
				font-family: "PingFang SC";
				font-size: 28rpx;
				font-style: normal;
				font-weight: 400;
				line-height: 39.2rpx;
			}
		}

		.pass-box {
			position: relative;

			.input-value {
				height: 88rpx;
				border-radius: 12rpx;
				border: 2rpx solid var(---line-1, #E5E6EB);
				padding-left: 20rpx;
				margin: 40rpx 0;
				color: #333;
			}

			.clearIcon {
				position: absolute;
				right: 70rpx;
				top: 22rpx;
				background-color: #C9CDD4;
				color: #fff;
				font-weight: 550;
				border-radius: 50%;
				height: 48rpx;
				line-height: 48rpx;
				width: 48rpx;
				display: block;
				text-align: center;
			}


		}

		.login {
			margin: 32rpx 0;
		}

		.info {

			.forget-password {
				color: #86909c;
				font-family: "PingFang SC";
				font-size: 28rpx;
				font-style: normal;
				font-weight: 400;
				line-height: 39.2rpx;
			}

			.other-login {
				color: #165dff;
				font-family: "PingFang SC";
				font-size: 28rpx;
				font-style: normal;
				font-weight: 400;
				line-height: 39.2rpx;
			}
		}
	}
</style>